<template>
<div>
    <ul class="tab_bar">
     <router-link to="/" exact tag="li"><i class="iconfont icon-shouye"></i><span>首页</span></router-link>
      <router-link :to="{name:'quest'}" tag="li"><i class="iconfont icon-wenda"></i><span>问答</span></router-link>
      <router-link to="/kefu" tag="li"><i class="iconfont icon-kefu"></i><span>客服</span></router-link>
      <router-link to="/fenlei" tag="li"><i class="iconfont icon-leimupinleifenleileibie"></i><span>分类</span></router-link>
      <router-link to="/my" tag="li"><i class="iconfont icon-wode"></i><span>我的</span></router-link>
    </ul>
</div>
</template>
<script>
export default{
    name:"NavList",
    data(){
        return{

        }
    }
}</script>
<style>
*{
    margin:0;
    padding:0;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block; 
}
a{text-decoration:none;}

/* // 自动换行 */
.tab_bar{display:flex;flex-direction:row;}
div ul{width:100%;height:auto;font-size:.05rem;position:fixed;bottom:0;}
div ul li{width:20%;}
div ul li .iconfont{font-size:1rem;}
div ul li span{display:block;}
.active{color:blue;}
.active span{font-weight:bold;color:#333;}
</style>